<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>甜蜜旅程邀请</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background: linear-gradient(135deg, #ff9a9e 0%, #fad0c4 100%);
            font-family: "Microsoft Yahei", sans-serif;
            cursor: default;
        }

        .romantic-container {
            background: rgba(255, 255, 255, 0.95);
            padding: 60px 100px;
            border-radius: 24px;
            box-shadow: 0 16px 40px rgba(255, 105, 180, 0.2);
            text-align: center;
            width: 720px;
            position: relative;
            border: 3px solid #ff69b4;
        }

        h2 {
            font-size: 42px;
            color: #ff1493;
            margin-bottom: 30px;
            text-shadow: 2px 2px 4px rgba(255, 20, 147, 0.1);
        }

        .sweet-text {
            font-size: 28px;
            color: #ff69b4;
            margin-bottom: 60px;
            line-height: 1.6;
        }

        .emoji-track {
            width: 180px;
            height: 180px;
            margin: 40px auto;
            background: url(imgs/1.png) no-repeat center/contain;
            transition: background-image 0.08s;
            filter: drop-shadow(0 4px 12px rgba(255, 105, 180, 0.3));
            pointer-events: none; /* 新增 */
            z-index: 2; /* 新增 */
        }

        .button-group {
            display: flex;
            gap: 60px;
            margin-top: 60px;
            justify-content: center;
            position: relative;
            z-index: 1; /* 新增 */
        }

        .btn {
            padding: 24px 60px;
            border: none;
            border-radius: 20px;
            cursor: pointer;
            font-size: 24px;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            min-width: 200px;
            position: relative;
            overflow: hidden;
            letter-spacing: 2px;
        }

        .sweet-btn {
            background: linear-gradient(45deg, #ff6b6b, #ff8e8e);
            color: white;
            box-shadow: 0 6px 24px rgba(255, 107, 107, 0.4);
        }

        .refuse-btn {
            background: linear-gradient(45deg, #a8a8a8, #c0c0c0);
            color: white;
            box-shadow: 0 6px 24px rgba(168, 168, 168, 0.3);
        }

        .btn:hover {
            transform: scale(1.1) rotate(3deg);
            filter: brightness(1.1);
        }

        .btn::after {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: linear-gradient(
                45deg,
                transparent,
                rgba(255, 255, 255, 0.3),
                transparent
            );
            transform: rotate(45deg);
            transition: 0.8s;
        }

        .btn:hover::after {
            left: 150%;
        }
    </style>
</head>
<body>
    <div class="romantic-container">
        <h2>满意度评价</h2>
        <p class="sweet-text">亲，您对我的服务满意吗</p>
        <div class="emoji-track" id="emoji"></div>
        <div class="button-group">
            <button class="btn sweet-btn" id="sweetBtn">👫 非常满意</button>
            <button class="btn refuse-btn" id="refuseBtn">😭 满意</button>
        </div>
    </div>

    <script>
        const emoji = document.getElementById('emoji');
        const sweetBtn = document.getElementById('sweetBtn');
        const refuseBtn = document.getElementById('refuseBtn');
        let lastUpdate = 0;

        // 精确坐标计算函数
        function getElementCenter(element) {
            const rect = element.getBoundingClientRect();
            return {
                x: rect.left + rect.width / 2,
                y: rect.top + rect.height / 2
            };
        }

        // 修复后的贝塞尔路径计算
        function trackMousePosition(e) {
            const container = document.querySelector('.romantic-container');
            const containerRect = container.getBoundingClientRect();
            
            // 获取按钮中心坐标（相对页面）
            const start = getElementCenter(refuseBtn);
            const end = getElementCenter(sweetBtn);
            
            // 控制点计算（提高200px形成弧线）
            const control = {
                x: (start.x + end.x) / 2,
                y: (start.y + end.y) / 2 - 200
            };

            const mouseX = e.clientX;
            const mouseY = e.clientY;

            let closestT = 0;
            let minDistance = Infinity;

            // 高精度采样（500点）
            for(let t = 0; t <= 1; t += 0.002) {
                const x = quadraticBezier(t, start.x, control.x, end.x);
                const y = quadraticBezier(t, start.y, control.y, end.y);
                const dist = Math.hypot(mouseX - x, mouseY - y);
                
                if(dist < minDistance) {
                    minDistance = dist;
                    closestT = t;
                }
            }

            return Math.max(0, Math.min(1, closestT));
        }

        // 贝塞尔曲线公式
        function quadraticBezier(t, p0, p1, p2) {
            return (1 - t) * (1 - t) * p0 + 2 * (1 - t) * t * p1 + t * t * p2;
        }

        // 防抖处理的表情更新
        function updateEmojiFrame(e) {
            const now = Date.now();
            if(now - lastUpdate < 30) return; // 30ms节流
            
            const progress = trackMousePosition(e);
            const frame = Math.min(13, Math.max(1, Math.round(progress * 12) + 1));
            
            emoji.style.backgroundImage = `url(imgs/${frame}.png)`;
            lastUpdate = now;
        }

        // 事件监听
        document.addEventListener('mousemove', updateEmojiFrame);
        
        // 初始化重置
        document.addEventListener('mouseleave', () => {
            emoji.style.backgroundImage = 'url(imgs/1.png)';
        });

        // 按钮点击效果
        [sweetBtn, refuseBtn].forEach(btn => {
            btn.addEventListener('click', () => {
                btn.style.transform = 'scale(0.95)';
                setTimeout(() => {
                    btn.style.transform = 'scale(1)';
                }, 100);
            });
        });
    </script>
</body>
</html>